<template>
  <div class="outbreakbox">
    <h2><span class="return" @click="back">疫情公告</span> <span class="mid">>></span> <span class="vicetit">{{vice}}</span></h2>
    <div class="context" id='context'>
      <h3 style="font-size: 15px;
        text-align: center;
        margin-bottom: 25px;">{{main.noticetitle}}</h3>
      <p class="bin" style="overflow: hidden;
        border-bottom: 1px solid #2f3242;
        margin-bottom: 25px;">
        <span class="left" style="font-size: 13px;
          float: left;
          margin-right: 35px;
          line-height: 34px;">{{main.updatetime}}</span>
        <span class="left" style="font-size: 13px;
          float: left;
          margin-right: 35px;
          line-height: 34px;">阅读数：{{main.readcount}}</span>
        <span style="font-size: 13px;
          float: right;
          margin-left: 35px;
          cursor: pointer;
          display: flex;
          align-items: center;
          line-height: 34px;" class="right" v-print="'#context'"><i class="print"></i>打印</span>
        <span  @click="share" style="font-size: 13px;
          float: right;
          margin-left: 35px;
          cursor: pointer;
          display: flex;
          align-items: center;
          line-height: 34px;" class="right"><i class="share"></i>分享</span>
      </p>
      <p class="text" style="text-indent: 2em;
      font-size: 13px;
      line-height: 24px;
      margin-bottom: 10px;
      text-align: justify;">{{main.textdetails}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'organization',
    data() {
      return {
        noticeid: '',
        vice: '',
        main: {}
      }
    },
    mounted() {
      this.getUserInfo();
      let data = JSON.parse(this.$route.query.context);
      this.noticeid = data.noticeid;
      // console.log(this.noticeid)
      // this.main = Object.assign({}, data);
      // this.vice = this.main.noticetitle;
      // console.log(this.main);
      this.gettext()
    },
    methods: {
      // 用户信息
      getUserInfo() {
        this.$http('/user/loginindex', {}).then(
          res => {
            console.log(res)
            if (res.code == 200) {
              this.$store.commit('changeagent',res.data.user.organizationname);
              this.$store.commit('changeagenter',res.data.user.collegename);
              this.$store.commit('changeuser',res.data.user.username);
              this.$store.commit('changephone',res.data.user.phone);
              this.$store.commit('changerole',res.data.roleid);
              this.$store.commit('changeposition',res.data.user.position);
            }
          }
        )
      },
      gettext(){
        this.$http('/announcementdetails/form', {
          "noticeid": this.noticeid
        }).then(
          res => {
            console.log(res)
            if (res.code == 200) {
              this.main = res.data;
              this.vice = res.data.noticetitle
            }
            console.log(this.main)
            console.log(this.vice)
          }
        )
      },
      detail(v, i) {
        console.log(v)
      },
      back() {
        this.$router.go(-1)
      },
      share(){
        var title = this.vice;
        var ftit = '文章';
        // window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(document.location) + '?sharesource=qzone&title=' + ftit + '&summary=' + '');
        window.open('http://connect.qq.com/widget/shareqq/index.html?url='+document.location.href+'?sharesource=qzone&title=标题&summary=分享文章')
      }
    }
  }
</script>

<style lang="less" scoped>
  @page {
    size: auto;  /* auto is the initial value */
    margin: 10mm; /* this affects the margin in the printer settings */
    box-sizing: border-box;
  }
  .outbreakbox {
    h2 {
      font-size: 16px;
      color: #fff;
      line-height: 44px;
      margin-bottom: 20px;

      .return {
        cursor: pointer;

        &:hover {
          color: #4353da;
        }
      }

      .mid {
        font-size: 12px;
        color: #fff;
        margin: 0 10px;
      }

      .vicetit {
        font-size: 14px;
        color: #fff;
      }
    }

    .context {
      background-color: #000418;
      padding: 30px 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      h3 {
        font-size: 15px;
        color: #fff;
        text-align: center;
        margin-bottom: 25px;
      }

      .text {
        text-indent: 2em;
        font-size: 13px;
        color: #fff;
        line-height: 24px;
        margin-bottom: 10px;
        text-align: justify;
      }

      .bin {
        overflow: hidden;
        border-bottom: 1px solid #2f3242;
        margin-bottom: 25px;

        span {
          font-size: 13px;
          color: #fff;
          line-height: 34px;
        }

        .left {
          float: left;
          margin-right: 35px;
        }

        .right {
          float: right;
          margin-left: 35px;
          cursor: pointer;
          display: flex;
          align-items: center;

          &:hover {
            color: orange;
          }

          i {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
          }

          .print {
            background: url("../assets/images/dayin.png") no-repeat center;
            background-size: 15px;
          }

          .share {
            background: url("../assets/images/share.png") no-repeat center;
            background-size: 15px;
          }
        }
      }
    }
  }
</style>
